<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<c:set var="ctx" value="${pageContext.request.contextPath}"/>
<!DOCTYPE html>
<html>
	<head>
		<title>切位产品采购</title>
		<jsp:include page="../inc_min.jsp"></jsp:include>
		<link rel="stylesheet" href="${ctx}/css/common.css" />
		<link rel="stylesheet" href="${ctx}/css/flightQW.css" />
		<style>
			*{ margin:0; padding:0;list-style: none;} 
			#outer {width:1300px;margin:0px auto;}
			#tab {overflow:hidden;zoom:1;margin-top:10px;}
			#tab li {float:left;color:#17AACC;height:30px;	cursor:pointer;	line-height:30px;padding:0 5px;}
			#tab li.current {color:#f9a61a;}
			#content {border-top-width:0;}
			#content ul {line-height:25px;display:none;}
		</style>
		<script type="text/javascript">
		var deptCity="";//出发城市
		var arrCity="";//到达城市
		var deptDate="";//出发日期
		var seatClass="";//舱位
		var charterType="";//类型 1硬切
		var sortType="deptDate";//排序方式
		var routingType="RT";//往返类型
		var seatCount="";//座位数
		var deptStartDate = addDate(2);
		$(function(){  
			//var a;
			//点击按照条件查询
				$("#query").click(function(){
					if($("#arrCity").val() == ""){
						jQuery.messager.alert('提示:','到达城市输入有误!'); 
						return false;
					}
					if($("#seat").val() == ""){
						jQuery.messager.alert('提示:','舱位不能为空!'); 
						return false;
					}
					if($("#seatCount").val() == ""){
						jQuery.messager.alert('提示:','座位数不能为空!'); 
						return false;
					}
					charterType="QW";
					deptCity=$("#startCity").val();
					arrCity=$("#arrCity").val();
					//deptDate=$("#startDate").val();
					seatCount=$("#seatCount").val();
					seatClass=$("#seat").val();
					//deptCity=deptCity.replace('{$startCity}','');
					//arrCity=arrCity.replace('{$arrCity}','');
					$("#count").val(seatCount);
					query();
				});
				//预定
				$("#create").click(function(){
					var datas = []; 
					var titles = "";
					var deposit = 0;
                    var supplier = "";
					$('input[name="product"]:checked').each(function(){ 
						var temp = $(this).val();
						titles += flights[temp].label + "/";
                        supplier = flights[temp].supplier;
						var fcount = 0;
						var fprice = 0;
						var fseat = 0;
						$.each(flights[temp].products, function(n, item){
							if(fprice>item.fare.adultPrice){ fprice = item.fare.adultPrice;}
							if(n == 0){fprice = item.fare.adultPrice;}
							fseat = item.productSeats;
							datas.push(item); 
							fcount++;
						});
						if(fcount>=2){
							deposit += fseat*fprice*2;
						}else{
							deposit += fseat*fprice*fcount;
						}
					}); 
					if(datas.length==0){
						layer.alert('你还没有选择任何航班！');
					}else{
						$('#titles').val(titles);
						$('#deposit').val(deposit);
						book(datas,supplier);
					}
				});
			}); 
			function query(){
				var index = layer.load(); //换了种风格
				var datas={
				        "deptCity":deptCity,
				        "arrCity":arrCity,
				        "deptStartDate":deptStartDate,
				        "seatClass":seatClass,
				        "charterType":charterType,
				        "sortType":sortType,
				        "seatCount":seatCount,
				        "routingType":routingType
				    };
                $.ajax({
                    type: "GET",
                    url: "${ctx}/flight/queryQwFlight?temp="+Math.random(),
                    data: datas,
                    dataType: "json",
                    beforeSend:function(XMLHttpRequest){
                        $("#loading").append("<div style='margin:0 auto; width:200px; height:100px;border:1px'>正在检索航班信息...<img src='${ctx}/image/loading.gif'></div>");
                    },
                    error:function (XMLHttpRequest, textStatus, errorThrown){
                        $("#loading").append("<div style='margin:0 auto; width:400px; height:100px;border:1px'><h2>请求发生错误！</h2></div>");
                    },
					success:function(data){//返回json结果
						layer.closeAll(); 
						$("#tab").empty();
						$("#content").empty();
                        $("#loading").empty();
                        if (data.status == 1002 || data.data.length == 0) {
                            $("#loading").append("<div style='margin:0 auto; width:400px; height:100px;border:1px'><h2>没有找到相匹配的航班信息</h2></div>");
                            return false;
                        }
						var obj = data.data;
						flights = obj;
						$.each(obj, function(ind, item){   
                            var json = item.products;
                            var tabstr = "";
                            var contentStr = "";

                            if(ind==0){
                                tabstr = "<li class=\"current\" id='tab"+ind+"'><input name=\"product\" style='float:left;' type=checkbox value="+ind+"><span style='display:block;float:left;margin:-6px 0 0 3px;font-weight:bold;'>"+item.label+"</li> ";
                                contentStr = "<ul style=\"display:block;\">";
                            }else{
                                tabstr = "<li id='tab"+ind+"'><input name=\"product\" type=checkbox value="+ind+">"+item.label+"</li> ";
                                contentStr = "<ul>";
                            }
                            contentStr +="<div id='tableBox'>"
                                            + "	<table class='table' id='tb' >"
                                            + "	    <tr height='38px' >"
                                            + "			<td width='160px' align='center'><img src='${ctx}/image/flightQuery/flightNumber.gif'>航班号</td>"
                                            + "			<td width='208px' align='right'><img src='${ctx}/image/flightQuery/flightStart.gif'>出发</td>"
                                            + "			<td width='165px' align='center'>&nbsp;&nbsp;&nbsp;</td>"
                                            + "			<td width='208px'><img src='${ctx}/image/flightQuery/flightEnd.gif'>到达</td>"
                                            + "			<td width='130px' align='center'>舱位</td>"
                                            + "			<td width='130px' align='center'>座位数</td>"
                                            + "			<td width='130px' align='center'>行程天数</td>"
                                            + "			<td width='190px' align='center'>单价含税（CNY/张）</td>"
                                            + "		</tr>";
                            //循环当前产品中的所有航班信息
                            $.each(json, function (m, pro) {
                                var segments = pro.segments;
                                var flightNo = "";
                                var intevarDay = "";
                                var tomDay = "";
                                if(segments.length == 2){//往返
                                    var segmentsa = segments[0];
                                    var segmentsb = segments[1];
                                    var day = GetDateDiff(segmentsa.depDate,segmentsb.depDate,'day') - 0;
                                    var tom = GetDateDiff(segmentsa.depDate,segmentsa.arrDate,'day') - 0;
                                    if(tom != 0){
                                        tomDay = "+" + tom;
                                    }
                                    if(day <= 1){
                                        intevarDay = "1天";
                                    }else{
                                        intevarDay = day + "天" + (day-1) + "晚";
                                    }
                                    flightNo+="往：<span style='color:black;'>"+segmentsa.flightNo+"</span><br/>";
                                    flightNo+="返：<span style='color:black;'>"+segmentsb.flightNo+"</span>";
                                    var image = "";
                                    if(segmentsa.stopover.length !=0 || segmentsb.stopover.length !=0){
                                        var stop = "";
                                        if(segmentsa.stopover.length !=0){
                                            $.each(segmentsa.stopover, function (o, stopOver) {
                                                stop += "经停机场："+stopOver.stopoverCn+"；机场三字码："+stopOver.stopover+"<br>到达时间："+stopOver.arrDate + " " + stopOver.arrTime+"；离开时间："+stopOver.depDate + " " + stopOver.depTime+"<br>停留时长："+stopOver.stopoverTime+"分钟";
                                            });
                                        }
                                        if(segmentsb.stopover.length !=0){
                                            stop = "";
                                            $.each(segmentsb.stopover, function (o, stopOver) {
                                                stop += "经停机场："+stopOver.stopoverCn+"；机场三字码："+stopOver.stopover+"<br>到达时间："+stopOver.arrDate + " " + stopOver.arrTime+"；离开时间："+stopOver.depDate + " " + stopOver.depTime+"<br>停留时长："+stopOver.stopoverTime+"分钟";
                                            });
                                        }
                                        image+="<span style='color:#23b9dc'>"+segmentsa.depDate+"</span><br/>";
                                        image+="<img src='${ctx}/image/flightQuery/stop.gif'  class='tip' data-title='详情' data-content='"+stop+"'><br/>";
                                        image+="<span style='color:#23b9dc'>"+segmentsb.arrDate+"</span>";

                                    }else{
                                        image+="<span style='color:#23b9dc'>"+segmentsa.depDate+"</span><br/>";
                                        image+="<img src='${ctx}/image/flightQuery/round.gif'><br/>";
                                        image+="<span style='color:#23b9dc'>"+segmentsb.arrDate+"</span>";
                                    }
                                    var depAp = "";
                                    var arrAp = "";
                                    if(segmentsa.arrAp == segmentsb.depAp){
                                        depAp+="<span>"+segmentsa.depTime+"</span><br/>";
                                        depAp+="<span style='color:#444e50'>"+segmentsa.depApCn+"</span><span style='color:#444e50'>("+segmentsa.depAp+")</span><span style='color:#e2615c'>"+segmentsa.depTerminal+"</span><br/>";
                                        depAp+="<span>"+segmentsb.arrTime+"</span><br/>";

                                        arrAp+="<span>"+segmentsa.arrTime+"</span><span style='color:#e2615c'>"+tomDay+"</span><br/>";
                                        arrAp+="<span style='color:#444e50'>"+segmentsb.depApCn+"</span><span style='color:#444e50'>("+segmentsb.depAp+")</span><span style='color:#e2615c'>"+segmentsb.depTerminal+"</span><br/>";
                                        arrAp+="<span>"+segmentsb.depTime+"</span><br/>";
                                    }else{
                                        depAp+="<span>"+segmentsa.depTime+"</span><br/>";
                                        depAp+="<span style='color:#444e50'>"+segmentsa.depApCn+"</span><span style='color:#444e50'>("+segmentsa.depAp+")</span><span style='color:#e2615c'>"+segmentsa.depTerminal+"</span><br/>";
                                        depAp+="<span style='color:#444e50'>"+segmentsb.arrApCn+"</span><span style='color:#444e50'>("+segmentsb.arrAp+")</span><span style='color:#e2615c'>"+segmentsb.arrTerminal+"</span><br/>";
                                        depAp+="<span>"+segmentsb.arrTime+"</span><br/>";

                                        arrAp+="<span>"+segmentsa.arrTime+"</span><span style='color:#e2615c'>"+tomDay+"</span><br/>";
                                        arrAp+="<span style='color:#444e50'>"+segmentsa.arrApCn+"</span><span style='color:#444e50'>("+segmentsa.arrAp+")</span><span style='color:#e2615c'>"+segmentsa.arrTerminal+"</span><br/>";
                                        arrAp+="<span style='color:#444e50'>"+segmentsb.depApCn+"</span><span style='color:#444e50'>("+segmentsb.depAp+")</span><span style='color:#e2615c'>"+segmentsb.depTerminal+"</span><br/>";
                                        arrAp+="<span>"+segmentsb.depTime+"</span><br/>";
                                    }
                                }else{
                                    var segmentsa = segments[0];
                                    var tom = GetDateDiff(segmentsa.depDate,segmentsa.arrDate,'day') - 0;
                                    if(tom != 0){
                                        tomDay = "+" + tom;
                                    }
                                    flightNo="<span style='color:black;'>"+segmentsa.flightNo+"</span><br/>";
                                    var image = "";
                                    if(segmentsa.stopover.length !=0){
                                        var stop = "";
                                        $.each(segmentsa.stopover, function (o, stopOver) {
                                            stop += "经停机场："+stopOver.stopoverCn+"；机场三字码："+stopOver.stopover+"<br>到达时间："+stopOver.arrDate + " " + stopOver.arrTime+"；离开时间："+stopOver.depDate + " " + stopOver.depTime+"<br>停留时长："+stopOver.stopoverTime+"分钟";
                                        });
                                        image+="<span style='color:#23b9dc'>"+segmentsa.depDate+"</span><br/>";
                                        image+="<img src='${ctx}/image/flightQuery/toStop.png' class='tip' data-title='详情' data-content='"+stop+"'><br/>";
                                    }else{
                                        image+="<span style='color:#23b9dc'>"+segmentsa.depDate+"</span><br/>";
                                        image+="<img src='${ctx}/image/flightQuery/dancheng.png'><br/>";
                                    }
                                    var depAp = "";
                                    var arrAp = "";
                                    depAp+="<span>"+segmentsa.depTime+"</span><br/>";
                                    depAp+="<span style='color:#444e50'>"+segmentsa.depApCn+"</span><span style='color:#444e50'>("+segmentsa.depAp+")</span><span style='color:#e2615c'>"+segmentsa.depTerminal+"</span><br/>";

                                    arrAp+="<span>"+segmentsa.arrTime+"</span><span style='color:#e2615c'>"+tomDay+"</span><br/>";
                                    arrAp+="<span style='color:#444e50'>"+segmentsa.arrApCn+"</span><span style='color:#444e50'>("+segmentsa.arrAp+")</span><span style='color:#e2615c'>"+segmentsa.arrTerminal+"</span><br/>";
                                }
                                contentStr+="<tr height='90px'>"
                                contentStr+="    <td width='160px' align='center'>"
                                contentStr+= flightNo
                                contentStr+="    </td>"
                                contentStr+="    <td width='208px' align='right'>"
                                contentStr+= depAp
                                contentStr+="    </td>"
                                contentStr+="    <td width='165px' align='center'>"
                                contentStr+= image
                                contentStr+="    </td>"
                                contentStr+="    <td width='208px'>"
                                contentStr+= arrAp
                                contentStr+="    </td>"
                                contentStr+="    <td width='88px' align='center' style='color:#23b9dc'>"+CommonConverter.toFlightCabinTypeStr(pro.fare.seatClass)+"</td>"
                                contentStr+="    <td width='86px' align='center' style='color:#23b9dc'>"+pro.productSeats+"</td>"
                                contentStr+="    <td width='96px' align='center' style='color:#23b9dc'>"+intevarDay+"</td>"
                                contentStr+="    <td width='151px' align='center' style='color:#e2615c'>"+pro.fare.adultPrice+"（CNY/张）</td>"
                                contentStr+="</tr>"
                            });
                            contentStr += "					</table>"
                            + "				</div>"
                            + "</ul>";

                            $("#tab").append(tabstr);
                            $("#content").append(contentStr);
                            $('.tip').webuiPopover({ trigger:'hover',width:300,padding:true,placement:'bottom-right'});
                            var $li = $('#tab li');
                            var $ul = $('#content ul');
                            $li.click(function(){
                                var $this = $(this);
                                var $t = $this.index();
                                $li.removeClass();
                                $this.addClass('current');
                                $ul.css('display','none');
                                $ul.eq($t).css('display','block');
                            });
                            $(".beizhu").click(function(){
                                if($(this).next(".remark").is(':hidden')){
                                    $(this).next(".remark").show();
                                }else{
                                    $(this).next(".remark").hide();
                                }
                            });
						});  
					},
					error: function(XMLHttpRequest, textStatus, errorThrown) {
						layer.closeAll();
                    }
				});
			}

		</script>
	</head>
	<body>
    <jsp:include page="../head.jsp"></jsp:include>
        <ul class="listQW">
            <li>出发城市： 
            <input type="text" value="${requestScope.deptCityName}" size="15" id="homecity_name" name="homecity_name" style="width:150px;height: 18px" mod="address|notice" mod_address_source="hotel" mod_address_suggest="" mod_address_reference="startCity" mod_notice_tip="中文/拼音" />
			<input id="startCity" name="startCity" type="hidden" value="${requestScope.deptCity}" />
            </li>
            <li>
			到达城市：
			<input type="text" value="${requestScope.arrCityName}" size="15" id="getcity_name" name="getcity_name" style="width:150px;height: 18px" mod="address|notice" mod_address_source="hotel"  mod_address_reference="arrCity" mod_notice_tip="中文/拼音" />
			<input id="arrCity" name="arrCity" type="hidden" value="${requestScope.arrCity}" />
            </li>
            <li>
               	 舱位：
                <select id="seat" style="height:22px;">
                	<option value="">请选择</option>
                    <option value="Y" <c:if test="${requestScope.seatClass == 'Y'}">selected="selected"</c:if>>经济舱</option>
                    <option value="F" <c:if test="${requestScope.seatClass == 'F'}">selected="selected"</c:if>>头等舱</option>
                    <option value="C" <c:if test="${requestScope.seatClass == 'C'}">selected="selected"</c:if>>商务舱</option>
                </select>
            </li>
            <li>
              	座位数：
                <input type="text" id="seatCount" value="${requestScope.seatCount}" style="width:150px;height: 18px"/>
            </li>
            <li><input type="button" value="查询" class="query" id="query"/></li>
            <li><button id="create" class="query" style="background:#f9a61a;border-color:#f9a61a;">预定</button></li>
        </ul>
        <div id="outer">
        		<ul id="tab"></ul>
		    <div id="content"> 
 		    </div>
            <div id="loading" style="text-align: center;line-height: 100px"></div>
		</div>
</div>
		
	
<form method="post" id="bookingForm">
<input type="hidden" name="count" id="count">
<input type="hidden" name="titles" id="titles">
<input type="hidden" name="deposit" id="deposit">
<input type="hidden" name="flights" id="flights">
<input type="hidden" name="b" id="b">
</form>
<script type="text/javascript" src="${ctx }/jslib/airport/fixdiv.js"></script>
<script type="text/javascript" src="${ctx }/jslib/airport/address.js"></script>
<script type="text/javascript" src="${ctx}/jslib/biz/bookingForSearching.js" charset="utf-8"></script>
<script type="text/javascript">
 
function book(flights,supplier){
	$("#flights").val(JSON.stringify(flights));
	gotoContractBooking(flights,supplier,'bookingForm','b','${ctx}/np/book');
}
<c:if test="${requestScope.query == '1'}">
charterType="QW";
deptCity='${requestScope.deptCity}';
arrCity='${requestScope.arrCity}';
seatCount='${requestScope.seatCount}';
seatClass='${requestScope.seatClass}';
$("#count").val(seatCount);
query();
</c:if>
</script>
<jsp:include page="../footer.jsp"></jsp:include>
</body>
</html>